<!doctype html>
<meta charset="utf-8">
<title>国成社区政务</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
<script src="/js/vue/vue.min.js"></script>
<script src="/js/vue/vue-resource.min.js"></script>
<link href="css/index.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="/js/webrtc/adapter-7.4.0.min.js"></script>
<script src="/js/webrtc/srs.sdk.js"></script>

<body>
  <div class="wpbox">
    <div class="bnt">
      <div class="topbnt_left fl">
        <ul>
          <li class="active"><a href="/govAdmin.html#/pages/gov/govRoomManage">房屋管理</a></li>
          <li><a href="/admin.html#/pages/gov/govOwnerManage">户籍管理</a></li>
          <li><a href="/admin.html#/pages/gov/govPersonManage?personType=3003">流动人口</a></li>
          <li><a href="/admin.html#/pages/gov/govPersonManage?personType=2002">常驻人口</a></li>
        </ul>
      </div>
      <h1 class="tith1 fl boxs_title">社区大屏</h1>
      <div class=" fr topbnt_right">
        <ul>
          <li><a href="/admin.html#/pages/gov/userProfile">控制台</a></li>
          <li><a href="/admin.html#/pages/gov/reportPoolManage">报事工单</a></li>
          <li><a href="/video.html#/pages/gov/videoControl">视频监控</a></li>
          <li><a href="/admin.html#/pages/gov/userProfile">用户画像</a></li>
        </ul>
        </ul>
      </div>
    </div>
    <!-- bnt end -->
    <div class="left1">
      <div class="aleftboxttop">
        <h2 class="tith2 boxs_title">今日社区报事数据统计</h2>
        <div class="lefttoday_tit" style=" height:8%">
        </div>
        <div class="lefttoday_number">
          <div class="widget-inline-box text-center fl">
            <p>总工单</p>
            <h3 class="ceeb1fd" id="totalCoun"></h3>
            <h4 class="text-muted pt6"><a href="/admin.html#/pages/gov/reportPoolManage" height="16">详情</a></h4>
          </div>
          <div class="widget-inline-box text-center fl">
            <p>已处理</p>
            <h3 class="c24c9ff" id="doneCoun"></h3>
            <h4 class="text-muted pt6"><a href="/admin.html#/pages/gov/myReportPoolDispatchManage" height="16">详情</a>
            </h4>
          </div>
          <div class="widget-inline-box text-center fl">
            <p>待处理</p>
            <h3 class="cffff00" id="withCoun"></h3>
            <h4 class="text-muted pt6"><a href="/admin.html#/pages/gov/reportPoolDispatchManage" height="16">详情</a></h4>
          </div>
          <div class="widget-inline-box text-center fl">
            <p>已回访</p>
            <h3 class="c11e2dd" id="finishCoun"></h3>
            <h4 class="text-muted pt6"><a href="/admin.html#/pages/gov/repairReturnVisit" height="16">详情</a></h4>
          </div>
        </div>
        <!-- lefttoday_number end -->
      </div>
      <div class="aleftboxtmidd">
        <h2 class="tith2 boxs_title">人口类型分布统计</h2>
        <div id="aleftboxtmidd" class="aleftboxtmiddcont"></div>
      </div>
      <div class="aleftboxtbott">
        <!-- <h2 class="tith2 boxs_title">社区监控1</h2> -->
        <div class="aleftboxtmiddcont">
          <video id="aleftboxt1" controls autoplay="autoplay" muted width="100%" height="280px">
          </video>
        </div>
      </div>
    </div>
    <!--  left1 end -->
    <div class="mrbox">
      <div class="mrbox_topmidd" style="width: 69%;">
        <div class="amiddboxttop">
          <h2 class="tith2 pt1 boxs_title">社区地图</h2>
          <div class="amiddboxttop_map" id="oneMap">
          </div>
          <!-- <div class="info">
            <p id='info'></p>
          </div> -->

        </div>
        <!--  amiddboxttop end-->
        <div class="amidd_bott">
          <div class="amiddboxtbott1 fl">
            <!-- <h2 class="tith2 pt1 boxs_title">社区监控2</h2> -->
            <div class="aleftboxtmiddcont">
              <video id="aleftboxt2" controls autoplay="autoplay" muted width="100%" height="280px">
              </video>
            </div>
          </div>

          <div class="amiddboxtbott2 fl">
            <!-- <h2 class="tith2 pt1 boxs_title">社区监控3</h2> -->
            <div class="aleftboxtmiddcont">
              <video id="aleftboxt3" controls autoplay="autoplay" muted width="100%" height="280px">
              </video>
            </div>
          </div>
        </div>
        <!-- amidd_bott end -->
      </div>
      <!-- mrbox_top end -->
      <div class="mrbox_top_right">
        <div class="arightboxtop">
          <h2 class="tith2 boxs_title">报事工单</h2>
          <div class="left2_table">
            <ul id="baoshi">

            </ul>
          </div>

        </div>

        <div class="arightboxbott">
          <!-- <h2 class="tith2 boxs_title">社区监控4</h2> -->
          <div class="aleftboxtmiddcont">
            <video id="aleftboxt4" controls autoplay="autoplay" muted width="100%" height="280px">
            </video>
          </div>
        </div>
      </div>
      <!-- mrbox_top_right end -->
    </div>

  </div>
  </div>
  <!--自定义导入 js-->
  <script src="js/echarts.min.js" charset="utf-8"></script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key='123123123123'&plugin=AMap.CitySearch"></script>
  <script src="/vcCore/vcFramework.js"></script>
  <script type="text/javascript" src="js/communityMap.js"></script>
  <script type="text/javascript" src="js/report.js"></script>
  <script type="text/javascript" src="js/person.js"></script>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('aleftboxtbott'));
    option = {
      color: ['#7ecef4'],
      backgroundColor: 'rgba(1,202,217,.2)',
      grid: {
        left: 20,
        right: 20,
        top: 13,
        bottom: 6,
        containLabel: true
      },

      xAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0)'
          }
        },
        axisLabel: {
          color: "rgba(255,255,255,0)"
        },
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.5)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          color: "rgba(255,255,255,.5)"
        },
        data: ['未调节', '调节中', '未调节']
      },
      series: [
        {
          name: '2011年',
          type: 'bar',
          barWidth: 30,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                1, 0, 0, 1,
                [
                  { offset: 0, color: 'rgba(230,253,139,.7)' },
                  { offset: 1, color: 'rgba(41,220,205,.7)' }
                ]
              )
            }
          },
          data: [18203, 23489, 29034]
        }
      ]
    };
    myChart.setOption(option);
  </script>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('amiddboxtbott1'));
    var data = [
      [[28604, 77, 17099, 'Australia', 1990], [31163, 77.4, 2440, 'Canada', 1990], [1516, 68, 1605773, 'China', 1990], [13670, 74.7, 10082, 'Cuba', 1990], [28599, 75, 49805, 'Finland', 1990], [29476, 77.1, 569499, 'France', 1990], [31476, 75.4, 789237, 'Germany', 1990], [28666, 78.1, 254830, 'Iceland', 1990], [1777, 57.7, 870776, 'India', 1990], [29550, 79.1, 129285, 'Japan', 1990], [2076, 67.9, 201954, 'North Korea', 1990], [12087, 72, 42954, 'South Korea', 1990], [24021, 75.4, 33934, 'New Zealand', 1990], [43296, 76.8, 4240375, 'Norway', 1990], [10088, 70.8, 381958, 'Poland', 1990], [19349, 69.6, 1475652, 'Russia', 1990], [10670, 67.3, 53905, 'Turkey', 1990], [26424, 75.7, 57117, 'United Kingdom', 1990], [37062, 75.4, 252810, 'United States', 1990]],
      [[44056, 81.8, 23973, 'Australia', 2015], [43294, 81.7, 35927, 'Canada', 2015], [13334, 76.9, 1376043, 'China', 2015], [21291, 78.5, 11562, 'Cuba', 2015], [38923, 80.8, 55057, 'Finland', 2015], [37599, 81.9, 64345, 'France', 2015], [44053, 81.1, 80545, 'Germany', 2015], [42182, 82.8, 329425, 'Iceland', 2015], [5903, 66.8, 1311027, 'India', 2015], [36162, 83.5, 126571, 'Japan', 2015], [1390, 71.4, 251317, 'North Korea', 2015], [34644, 80.7, 503439, 'South Korea', 2015], [34186, 80.6, 4528526, 'New Zealand', 2015], [64304, 81.6, 5210967, 'Norway', 2015], [24787, 77.3, 386194, 'Poland', 2015], [23038, 73.13, 143918, 'Russia', 2015], [19360, 76.5, 78630, 'Turkey', 2015], [38225, 81.4, 64715810, 'United Kingdom', 2015], [53354, 79.1, 321771, 'United States', 2015]]
    ];

    option = {
      backgroundColor: 'rgba(1,202,217,.2)',
      grid: {
        left: 40,
        right: 40,
        top: 50,
        bottom: 40
      },
      title: {
        top: 5,
        left: 20,
        textStyle: {
          fontSize: 10,
          color: 'rgba(255,255,255,.6)'
        },
        text: '环比类型：日环比'
      },
      legend: {
        right: 10,
        top: 5,
        textStyle: {
          fontSize: 10,
          color: 'rgba(255,255,255,.6)'
        },
        data: ['1990', '2015']
      },
      xAxis: {
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        }
      },
      yAxis: {
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        },
        scale: true
      },
      series: [{
        name: '1990',
        data: data[0],
        type: 'scatter',
        symbolSize: function (data) {
          return Math.sqrt(data[2]) / 5e2;
        },
        label: {
          emphasis: {
            show: true,
            formatter: function (param) {
              return param.data[3];
            },
            position: 'top'
          }
        },
        itemStyle: {
          normal: {
            shadowBlur: 10,
            shadowColor: 'rgba(120, 36, 50, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
              offset: 0,
              color: 'rgb(251, 118, 123)'
            }, {
              offset: 1,
              color: 'rgb(204, 46, 72)'
            }])
          }
        }
      }, {
        name: '2015',
        data: data[1],
        type: 'scatter',
        symbolSize: function (data) {
          return Math.sqrt(data[2]) / 5e2;
        },
        label: {
          emphasis: {
            show: true,
            formatter: function (param) {
              return param.data[3];
            },
            position: 'top'
          }
        },
        itemStyle: {
          normal: {
            shadowBlur: 10,
            shadowColor: 'rgba(25, 100, 150, 0.5)',
            shadowOffsetY: 5,
            color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
              offset: 0,
              color: 'rgb(129, 227, 238)'
            }, {
              offset: 1,
              color: 'rgb(25, 183, 207)'
            }])
          }
        }
      }]
    };
    myChart.setOption(option);
  </script>

  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('amiddboxtbott2'));
    option = {
      backgroundColor: 'rgba(1,202,217,.2)',
      grid: {
        left: 60,
        right: 60,
        top: 50,
        bottom: 40
      },

      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        top: 10,
        textStyle: {
          fontSize: 10,
          color: 'rgba(255,255,255,.7)'
        },
        data: ['2017年', '2018年', '同比增速']
      },
      xAxis: [
        {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            color: "rgba(255,255,255,.7)"
          },

          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          min: 0,
          max: 250,
          interval: 50,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.01)'
            }
          },

          axisLabel: {
            formatter: '{value} ml'
          }
        },
        {
          type: 'value',
          name: '',
          max: 25,
          interval: 5,
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLabel: {
            formatter: '{value} °C'
          }
        }
      ],
      series: [

        {
          name: '2017年',
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#b266ff' },
                  { offset: 1, color: '#121b87' }
                ]
              )
            }
          },
          data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
          name: '2018年',
          type: 'bar',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#00f0ff' },
                  { offset: 1, color: '#032a72' }
                ]
              )
            }
          },
          data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
          name: '同比增速',
          type: 'line',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: '#fffb34' },
                  { offset: 1, color: '#fffb34' }
                ]
              )
            }
          },
          yAxisIndex: 1,
          data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
      ]
    };
    myChart.setOption(option);
  </script>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('arightboxbott'));
    option = {
      color: ['#7de494', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
      backgroundColor: 'rgba(1,202,217,.2)',

      grid: {
        left: '5%',
        right: '8%',
        bottom: '7%',
        top: '8%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        },
        data: ['6-08', '6-09', '6-10', '6-11', '6-12', '6-13', '6-14']
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        },
      },
      series: [
        {
          name: '2014年',
          type: 'line',
          stack: '总量',
          areaStyle: { normal: {} },
          data: [120, 132, 101, 134, 90, 230, 210]
        }

      ]
    };
    myChart.setOption(option);
  </script>


</body>

</html>